<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>kml2gmaps.html: Maps KML file onto Google Maps</title>
    <style>
h1 { font-size: 14px; }
body, input { font-size: 12px; font-family: verdana,arial,sans-serif; }
ul#menu { margin: 0 0 0 20px; padding: 0; }
#menu li { list-style-type: none; cursor: pointer; margin: 0; padding: 2px; }
#menu li img { vertical-align: middle; }
div.popup { width: 18em; }
.footer { clear: both; font-size: 10px; padding-top: 10px; }
</style>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA2SGB7kYAwJ7vNIiGUvsYgBQhPSrtY3c-aq-G7Tm93zGQQxtL5xTnwm2_6ZCVnME0pZzKvB7i8npggw" type="text/javascript"></script>
  </head>
  <body>
    <h1>Maps KML file onto Google Maps <small>(SEE ALSO <a href="http://as-is.net/blog/archives/001032.html">http://as-is.net/blog/archives/001032.html</a>)</small></h1>
    <div id="map" style="width:600px;height:400px;float:left;"></div>
    <div style="width:300px;float:left;"><ul id="menu"></ul></div>
    <p class="footer">Written by <a href="http://as-is.net/blog/">Hirotaka Ogawa</a>. Powered by <a href="http://www.google.com/apis/maps/">Google Maps API</a>.</p>
    <script type="text/javascript">
    //<![CDATA[
    var baseIcon = new GIcon();
    baseIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    baseIcon.iconSize = new GSize(12, 20);
    baseIcon.shadowSize = new GSize(22, 20);
    baseIcon.iconAnchor = new GPoint(6, 20);
    baseIcon.infoWindowAnchor = new GPoint(5, 1);
      
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());

    var menu = document.getElementById("menu");
    function createMarker(point, index, name, desc) {
      var letter = String.fromCharCode("A".charCodeAt(0) + index);
      var marker = new GMarker(point, baseIcon);
      var msg = name ? '<b>' + name + '</b>' + (desc ? '<p>' + desc + '</p>' : '') : 'Marker <b>' + letter + '</b>';
      msg = '<div class="popup">' + msg + '</div>';

      var li = document.createElement("li");
      li.innerHTML = '<img src="' + baseIcon.image + '"> ' + name;

      var f = function() { marker.openInfoWindowHtml(msg); li.style.background = '#DDE'; };
      var g = function() { li.style.background = 'transparent'; }
      GEvent.addListener(marker, "click", f);
      GEvent.addListener(marker, "infowindowclose", g);
      li.onmousedown = f;
      li.onmouseover = function() { li.style.marginLeft = '2px'; }
      li.onmouseout = function() { li.style.marginLeft = '0px'; }

      menu.appendChild(li);
      return marker;
    }

    var request = GXmlHttp.create();
    var url = window.location.search;
    var i = url.indexOf('?url=');
    url = (i != -1) ? url.substr(i+5) : 'http://as-is.net/maps/sample.kml';
    url = 'http://as-is.net/maps/aproxy.cgi?url=' + encodeURIComponent(url);
    request.open("GET", url, true);
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
	var xmlDoc = request.responseXML;
	var markers = xmlDoc.documentElement.getElementsByTagName("Placemark");
	var len = Math.min(markers.length, 20);
	for (var i = 0; i < len; i++) {
	  var lng, lat;
	  var coordinates = markers[i].getElementsByTagName("coordinates")[0].childNodes[0].data;
	  if (coordinates) {
	    var c = coordinates.split(",");
	    lng = parseFloat(c[0]);
	    lat = parseFloat(c[1]);
	  } else {
	    lng = parseFloat(markers[i].getElementsByTagName("longitude")[0].childNodes[0].data);
	    lat = parseFloat(markers[i].getElementsByTagName("latitude")[0].childNodes[0].data);
	  }
	  var point = new GLatLng(lat, lng);
	  if (!i) map.setCenter(point, 13);
	  var names = markers[i].getElementsByTagName("name");
	  var name = names.length ? names[0].childNodes[0].data : '';
	  var descs = markers[i].getElementsByTagName("description");
	  var desc = descs.length ? descs[0].childNodes[0].data : '';
	  var marker = new createMarker(point, i, name, desc);
	  map.addOverlay(marker);
	}
      }
    }
    request.send(null);
    //]]>
    </script>
  </body>
</html>
